<template>
  <!-- 歌曲页面 -->
  <div class="g-bg clearfix">
    <div class="sonlepage">
      <div class="overtext">
        <div class="cvrwrap">
          <div class="u-cover">
            <img :src="song.picUrl" :key="song.picUrl"/>
            <!-- <img src="https://p2.music.126.net/wtlniKH1vx19N5MqsfAK1A==/109951166537628922.jpg" alt=""> -->
            <span class="msk"></span>
          </div>
        </div>
        <div class="cnt">
          <div class="hd clearfix">
            <i class="lab"></i>
            <span class="tit">{{ song.name }}</span>
          </div>
          <p class="s-fc">
            歌手：<span class="s-fc5 cur">{{ song.singer }}</span>
          </p>
          <p class="des">
            所属专辑： 
            <span class="s-fc5 cur">{{ song.album }}</span>
          </p>
          <div class="btns clearfix">
            
            <a
              href="javascript:;"
              title="播放"
              class="btn1"
              @mousedown="click_play"
            >
              <i class="play1"></i>
              播放
            </a>
            <a
              href="javascript:;"
              title="添加"
              class="btn2"
              @mousedown="add_playList(music)"
            >
            </a>
            <a href="javascript:;" title="收藏" class="btn3">
              <i>收藏</i>
            </a>
            <a href="javascript:;" title="分享" class="btnA btn4">
              <i class="btni">分享</i>
            </a>
            <a href="javascript:;" title="下载" class="btnA btn5">
              <i class="btni">下载</i>
            </a>
            <a href="javascript:;" class="btnA">
              <i class="btn6 btni" v-if="total">({{ total }})</i>
            </a>
          </div>

          <div class="m-lycifo">
              
                   <p class="s-fc3" v-if="'needDesc' == ly_flag">暂时没有歌词 <a href="javascript:;" class="s-fc3 f-td">求歌词</a></p>
                   <p class="s-fc3" v-if="'nolyric' == ly_flag">纯音乐，无歌词</p>
              
               <div v-if="'lyric' == ly_flag">
            <div :style="lyric_page" >
              <p v-for="(el, index) in lyric" :key="index">{{ el }}</p>
            </div>
            <p class="open" @mousedown="open_page" v-if="!flag">
              展开 <i class="icon"></i>
            </p>
            <p class="shrink" @mousedown="CollapsePage" v-if="flag">
              收起 <i class="icon-1"></i>
            </p>
            </div>
          </div>
        </div>
      </div>
      <div class="user-op">
        <p><a href="javascript:;" class="s-fc4 f-td">上传歌词</a>&nbsp;<a href="javascript:;" class="s-fc4 f-td">歌词报错</a>
        
        
        </p>
      </div>
      <!-- 评论区 -->
      <CommentArea />
    </div>

    <div class="g-sd">
      <div v-if="playlists.length">
        <h3 class="u-hd">
          <span class="f-f1">包含这首歌的歌单</span>
        </h3>
        <ul class="m-rct clearfix">
          <li v-for="el in playlists" :key="el.id">
            <div class="cver">
              <router-link
                :to="{
                  path: '/playlist',
                  query: {
                    id: el.id,
                  },
                }"
              >
                <img :src="el.coverImgUrl + '?param=50y50'" alt="" />
              </router-link>
            </div>
            <div class="info">
              <p>
                <router-link
                  :to="{
                    path: '/playlist',
                    query: {
                      id: el.id,
                    },
                  }"
                  class="sname"
                >
                  {{ el.name }}
                </router-link>
              </p>
              <p>
                <span>by&nbsp;</span>

                <router-link
                  :to="{
                    path: '/user/home',
                    query: {
                      id: el.creator.userId,
                    },
                  }"
                  >{{ el.creator.nickname }}</router-link
                >
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div v-if="SimilarSongs.length">
        <h3 class="u-hd">
          <span class="f-f1">相似歌曲</span>
        </h3>
        <ul class="m-rct1 clearfix">
          <li class="f-cb clearfix" v-for="el in SimilarSongs" :key="el.id">
            <div class="txt overtext">
        
              
              <router-link
                :to="{
                  path:'/song',
                  query: {
                    id: el.id,
                  },
                }"
                class="s-fc1"
                >{{ el.name }}</router-link
              >
            </div>
            <div class="txt overtext">
              <a href="javascript:;" class="s-fc4">{{ el.artists[0].name }}</a>
            </div>
            <div class="opr">
              <a
                href="javascript:;"
                class="playbtn"
                @mousedown="click_play1(el.id)"
              ></a>
              <a
                href="javascript:;"
                class="addbtn"
                @mousedown="add_playList1(el.id)"
              ></a>
            </div>
          </li>
        </ul>
        <Load/>
      </div>
    </div>
  </div>
</template>

<script>
import Load from '../components/Load.vue'
import axios from "axios";
import CommentArea from "../components/CommentArea.vue";
export default {
  name: "SingPage",
  data() {
    return {
      lyric: [],
      lyric_page: {
        height: "299px",
        overflow: "hidden",
      },
      flag: false,
      music_id: "",
      music: "",
      total: "",

      playlists: [],
      SimilarSongs: [],

      tipstext: "",
      tipsset: "",

      contrast: "",

      song: {
        name: "",
        album: "",
        singer: "",
        Time: "",
        picUrl: "",
        
      },
      ly_flag:'lyric'
    };
  },
  components: {
    CommentArea,
    Load
  },
  methods:{
    open_page() {
      this.lyric_page.height = "";
      this.flag = true;
    },
    CollapsePage() {
      this.lyric_page.height = "299px";
      this.flag = false;
    },

    click_play() {
      this.$bus.$emit("musicList", this.music);
    },
    add_playList(value) {
      this.$bus.$emit("addPlayList", value);
    },
    click_play1(index) {
      axios
        .get("http://localhost:8080/api/song/detail", {
          params: {
            ids: index,
          },
        })
        .then((response) => {
          this.$bus.$emit("musicList", response.data.songs[0]);
        });
    },
    add_playList1(index) {
      axios
        .get("http://localhost:8080/api/song/detail", {
          params: {
            ids: index,
          },
        })
        .then((response) => {
          this.$bus.$emit("addPlayList", response.data.songs[0]);
        });
    },
  },
  mounted() {
    this.music_id = this.$route.query.id;
  
    window.scroll(0,0);
    //  歌曲详情
    this.song.name = this.$route.meta.songs[0].name;
    this.song.album = this.$route.meta.songs[0].al.name;
    this.song.singer = this.$route.meta.songs[0].ar[0].name;
    this.song.Time = this.$route.meta.songs[0].dt;
    this.song.picUrl = this.$route.meta.songs[0].al.picUrl;
    
    this.music = this.$route.meta.songs[0];

 
  
  },
  beforeRouteEnter(to, from, next) {
  
    axios
      .get("http://localhost:8080/api/song/detail" + "?" + Date.now(), {
        params: {
          ids: to.query.id,
        },
      })
      .then(
        (response) => {
         
          to.meta.songs = response.data.songs;
         
          next();
        },
        (err) => {
          console.log(err + "出错");
          next();
        }
      );
 
  },
 

  watch: {
    $route() {
        this.$router.go(0)
    },
    music_id(value) {
    
      // 歌词
        this.$nextTick( () => {
                 axios
        .get("http://localhost:8080/api/lyric" + "?" + Date.now(), {
          params: {
            id: value,
          },
        })
        .then((response) => {
            
             if (response.data.nolyric) {
               this.ly_flag = 'nolyric'
               
             }else if(response.data.needDesc) {
               this.ly_flag = 'needDesc'
               
             }else {
               this.ly_flag = 'lyric'
                let arr = response.data.lrc.lyric.split("\n");
             
                for (let k of arr) {
                this.lyric.push(k.split("]")[1]);
          }
             }

         
       
             
          
        });



        });

      // 相似歌单
      axios
        .get("http://localhost:8080/api/simi/playlist" + "?" + Date.now(), {
          params: {
            id: value,
          },
        })
        .then((response) => {
          this.playlists = response.data.playlists;
        });
      // 相似歌曲
      axios
        .get("http://localhost:8080/api/simi/song" + "?" + Date.now(), {
          params: {
            id: value,
          },
        })
        .then((response) => {
          this.SimilarSongs = response.data.songs;
        });
      this.$bus.$emit("comment", value, "/comment/music", 0);
      axios
        .get("http://localhost:8080/api/comment/music" + "?" + Date.now(), {
          params: {
            id: value,
            limit: "20",
          },
        })
        .then((response) => {
          this.total = response.data.total;
        });
    },
  },
};
</script>

<style scoped lang='less'>

  .sonlepage {
    float: left;
    padding: 37px 30px 40px 40px;
    width: 640px;

    .cvrwrap {
      position: relative;
      float: left;
      width: 206px;
      margin: 0 -226px 0 0;
      .u-cover {
        width: 198px;
        height: 198px;
        img {
          display: block;
          width: 130px;
          height: 130px;
          margin: 34px;
        }
        .msk {
          position: absolute;
          top: -4px;
          left: -4px;
          width: 206px;
          height: 205px;
          background: url(../images/coverall.png) no-repeat -140px -580px;
        }
      }
    }
  }

.cnt {
  float: right;
  width: 414px;
}
.lab {
  float: left;
  width: 54px;
  height: 24px;
  overflow: hidden;
  background: url(../images/icon.png) no-repeat 0 -463px;
}

.s-fc {
  margin: 5px 0 10px 0;
  text-align: left;
  color: #999;
}
.des {
  margin: 10px 0;
  text-align: left;
  color: #999;
}
.btns {
  margin: 0 0 38px 0;
}
.play1 {
  float: left;
  width: 20px;
  height: 18px;
  margin: 6px 2px 2px 0;
  overflow: hidden;
  background: url(../images/button2.png) no-repeat 0 -1622px;
}
.btn1 {
  float: left;

  height: 31px;
  line-height: 31px;
  width: 51px;
  padding: 0 7px 0 8px;
  text-align: center;
  background: url(../images/button2.png) no-repeat 0 -387px;
  cursor: pointer;
  color: #fff;
}
.btn2 {
  float: left;
  margin-right: 5px;
  height: 31px;
  width: 31px;
  background: url(../images/button2.png) no-repeat 0 -1588px;
  cursor: pointer;
}
.btn3 {
  float: left;
  margin-right: 6px;
  padding: 0 5px 0 0;
  height: 31px;
  line-height: 30px;
  background: url(../images/button2.png) no-repeat right -1020px;
  cursor: pointer;
  i {
    float: left;
    min-width: 23px;
    height: 31px;
    padding: 0 2px 0 28px;
    background: url(../images/button2.png) no-repeat 0 -977px;
  }
}
.btnA {
  float: left;
  margin-right: 6px;
  padding: 0 5px 0 0;
  height: 31px;
  line-height: 30px;
  cursor: pointer;
  background: url(../images/button2.png) no-repeat right -1020px;
}
.btni {
  display: inline-block;
  padding-right: 2px;
  padding-left: 28px;
  height: 30px;
  line-height: 30px;
}

.btn4 {
  background: url(../images/button2.png) no-repeat right -1020px;
  i {
    background: url(../images/button2.png) no-repeat 0 -1225px;
  }
}

.btn5 {
  i {
    background: url(../images/button2.png) no-repeat 0 -2761px;
  }
}
.btn6 {
  padding-right: 8px;
  background: url(../images/button2.png) no-repeat 0 -1465px;
}
.m-lycifo {
 
  line-height: 23px;
  white-space: nowrap;
  text-align: left;

  p {
    height: 23px;
    line-height: 23px;
    width: 100%;
  }
}
.icon {
  display: inline-block;
  width: 11px;
  height: 8px;
  background: url(../images/icon.png) no-repeat -65px -520px;
}
.icon-1 {
  display: inline-block;
  width: 11px;
  height: 8px;
  background: url(../images/icon.png) no-repeat -45px -520px;
}
.open {
  color: #0c73c2;
}
.shrink {
  color: #0c73c2;
}
.g-sd {
  float: right;
  width: 200px;
  padding: 20px 40px 40px 30px;
}
.u-hd {
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
  text-align: left;
  font-weight: bold;

}
.m-rct {
  margin-bottom: 25px;
  li {
    float: left;
    line-height: 24px;
    margin-bottom: 15px;
    width: 200px;
    height: 50px;
  }
}
.cver {
  float: left;
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
.sname {
  float: left;

  font-size: 14px;
  color: #000;
  width: 140px;
  height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  :hover {
    color: inherit;
    text-decoration: underline;
  }
}
.info {
  margin-left: 60px;
  line-height: 24px;
  text-align: left;
  p {
    width: 140px;
  }
}
.m-rct1 {
  margin-bottom: 25px;
  .f-cb {
    position: relative;
    margin: 10px 0 0;
    .txt {
      float: left;
      width: 156px;
      line-height: 16px;
      text-align: left;
    }
  }
}

.s-fc1 {
  color: #333;
}
.opr {
  float: right;
  position: relative;
  top: -4px;
  line-height: 32px;
}
.playbtn {
  margin-right: 16px;
  float: left;
  width: 10px;
  height: 11px;
  background: url(../images/icon2.png) no-repeat -69px -455px;
  opacity: 0.9;
  &:hover {
    opacity: 1;
  }
}
.addbtn {
  float: left;
  width: 10px;
  height: 11px;
  background: url(../images/icon2.png) no-repeat -87px -454px;
  opacity: 0.9;
  &:hover {
    opacity: 1;
  }
}

.sep {
  float: left;
  color: #ccc;
  margin: 0 10px;
}

.f-c {
  padding-top: 10px;
  position: relative;
  a {
    float: right;
    width: 46px;
    height: 25px;
    color: #fff;
    text-align: center;
    line-height: 25px;
    background: url(../images/button.png) no-repeat -84px -64px;
  }
}
.tit {
  position: relative;
  top: -6px;
  display: inline-block;
  text-align: left;
  font-size: 24px;
  vertical-align: text-top;
  margin-left: 5px;
}
.hd {
  text-align: left;
}
.s-fc5 {
  color: #0c73c2;
}
.user-op {
  text-align: right;
  margin-top: 48px;
  line-height: 30px;
}
.s-fc3{
  color: #666;
}
.f-td {
  text-decoration: underline;
  
}
.s-fc4 {
  color: #999;
}
.f-f1 {
  font-size: 12px;
}
.cur {
  &:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}
</style>